<template>
  <a-card :bordered="false">
    <a-form
      :form="form"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 12 }"
      @submit="handleSubmit"
    >
      <a-form-item
        v-for="d in list"
        :key="d.id"
        :label="d.name"
        extra="点击打开才会开始收集设备相关数据"
      >
        <a-switch
          v-decorator="[
            d.id,
            { initialValue: d.enabled, valuePropName: 'checked' },
          ]"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 12, offset: 4 }">
        <a-button type="primary" html-type="submit"> 提交 </a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import { gPostAction } from "@/api/manage";
export default {
  name: "Classification",
  props: {
    type: {
      type: String,
      default: "",
      required: false,
    },
  },
  data() {
    return {
      formLayout: "horizontal",
      form: this.$form.createForm(this, { name: "coordinated" }),
      list: [],
      classificationMap: {},
      typeMap: {
        iaas: {
          title: '精确管控与供电制冷联动-基础资源细粒度感知-权限管理-L1层：基础设施',
          listContent: '查看L1层：基础设施权限',
          setContent: '设置L1层：基础设施权限',
        },
        device: {
          title: '精确管控与供电制冷联动-基础资源细粒度感知-权限管理-L2层：IT设备',
          listContent: '查看L2层：IT设备权限',
          setContent: '设置L2层：IT设备权限',
        },
        cloud: {
          title: '精确管控与供电制冷联动-基础资源细粒度感知-权限管理-L3层：云平台资源',
          listContent: '查看L3层：云平台资源权限',
          setContent: '设置L3层：云平台资源权限',
        },
        app: {
          title: '精确管控与供电制冷联动-基础资源细粒度感知-权限管理-L4层：应用资源',
          listContent: '查看L4层：应用资源权限',
          setContent: '设置L4层：应用资源权限',
        },
      }
    };
  },
  mounted() {
    this.listByClassification();
  },
  methods: {
    listByClassification() {
      this.list = [];
      const typeObj = this.typeMap[this.type];
      let postData = {
        classification: this.type,
        title: typeObj.title,
        content: typeObj.listContent
      };
      gPostAction("/authority/listByClassification", postData).then((res) => {
        if (res.data) {
          this.list = res.data;
          this.list.forEach((item) => {
            this.classificationMap[item.id] = item.name;
          });
        }
      });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          const postData = {};
          Object.keys(values).forEach((key, i) => {
            postData["items[" + i + "].type"] = key;
            postData["items[" + i + "].enabled"] = values[key];
          });
          const typeObj = this.typeMap[this.type];
          postData.title = typeObj.title;
          postData.content = typeObj.setContent;
          gPostAction("/authority/set1", postData).then((res) => {
            if (res.success) {
              this.$message.success("设置成功");
            }
          });
        }
      });
    },
  },
};
</script>
